<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="full-screen" content="yes" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" href="css/application_checklist.css" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/vue1.0.js"></script>
		<!--<script type="text/javascript" src="js/vue.js"></script>-->
		<script type="text/javascript" src="js/index.js"></script>
		<title>确认申请</title>
		<style type="text/css">
			body {
				position: relative;
			}
			
			[v-cloak] {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<!-- header_头部  -->
		<header class="header">
			<p>
				<a href="personal_application.html"></a>
				<i>分期申请确认</i>
			</p>
		</header>
		<!-- section_骨架 -->
		<section class="section">
			<ul>
				<li><i>姓名:</i><b id="username"></b></li>
				<li><i>身份证号:</i><b id="idNumber"></b></li>
				<li><i>手机号:</i><b id="phone"></b></li>
				<li><i>银行名称:</i><b id="bank"></b></li>
				<li class="f1_boa"><i>银行卡号:</i><b id="bankCardNumber"></b></li>
				<li><i>分期类型:</i>
					<b v-cloak v-if="dott.stagingType=='THE_FIRST_INSURANCE'">首保</b>
					<b v-cloak v-if="dott.stagingType=='RENEWAL_OF_INSURANCE'">续保</b>
				</li>
				<li><i>分期险种:</i>
					<b v-cloak v-if="dott.loanType=='COMMERCIAL_CAR_STRONG_INSURANCE'">商业险+交强险+车船险</b>
					<b v-cloak v-if="dott.loanType=='COMMERCIAL_INSURANCE'">商业险</b>
				</li>
				<li><i>保险公司:</i>
					<b v-cloak v-if="dott.insuranceCompany">{{dott.insuranceCompany.name}}</b>
				</li>
				<li class="f1_bob"><i>保险产品:</i>
					<template v-if="dott.loanType=='COMMERCIAL_CAR_STRONG_INSURANCE'">
						<p v-cloak v-if="dott.strongInsurance=='BUY'">交强险购买</p>
						<p v-cloak v-if="dott.strongInsurance=='NOT_BUY'">交强险不购买</p>
						<p v-cloak v-if="dott.carInsurance=='BUY'">车船险购买</p>
						<p v-cloak v-if="dott.carInsurance=='NOT_BUY'">车船险不购买</p>
					</template>
					<p v-cloak>第三方责任险{{dott.liabilityInsurance}}</p>
					<p v-cloak v-if="dott.vehicleLossInsurance=='BUY'">车辆损失险购买</p>
					<p v-cloak v-if="dott.vehicleLossInsurance=='NOT_BUY'">车辆损失险不购买</p>
					<p v-cloak v-if="dott.noDeductibles=='BUY'">不计免赔购买</p>
					<p v-cloak v-if="dott.noDeductibles=='NOT_BUY'">不计免赔不购买</p>
					<p v-cloak>车上人员责任险每座{{dott.personnelLiabilityInsurance}}</p>
					<p v-cloak v-if="dott.robberyAndTheftInsurance=='BUY'">全车盗抢险购买</p>
					<p v-cloak v-if="dott.robberyAndTheftInsurance=='NOT_BUY'">全车盗抢险不购买</p>
					<p v-cloak v-if="dott.riskOfGlassBreakage=='BUY'">玻璃单独破损险购买</p>
					<p v-cloak v-if="dott.riskOfGlassBreakage=='NOT_BUY'">玻璃单独破损险不购买</p>
					<p v-cloak v-if="dott.selfIgnitionLossInsurance=='BUY'">自然损失险购买</p>
					<p v-cloak v-if="dott.selfIgnitionLossInsurance=='NOT_BUY'">自然损失险不购买</p>
					<p v-cloak v-if="dott.vehicleScratchRisk=='BUY'">车身划痕损失险购买</p>
					<p v-cloak v-if="dott.vehicleScratchRisk=='NOT_BUY'">车身划痕损失险不购买</p>
				</li>
				<li><i>汽车品牌型号:</i><input placeholder="请输入汽车品牌型号" id="carBrand" style="text-align: right;float: right; line-height: 2rem;" type="text" /></li>
				<li><i>商业险:</i><b v-cloak>{{dott.commercialInsuranceMoney}}元</b></li>
				<template v-if="dott.loanType=='COMMERCIAL_CAR_STRONG_INSURANCE'">
					<li><i>交强险:</i><b v-cloak>{{dott.strongInsuranceMoney}}元</b></li>
					<li><i>车船险:</i><b v-cloak>{{dott.vehicleAndVesselTax}}元</b></li>
				</template>
				<li><i>消费金抵扣:</i><b id="xfjdk" v-cloak>使用了{{getIntegral(dott.user.userId,dott.totalMoney)}}消费金，抵扣了{{getDMoney(dott.user.userId,dott.totalMoney)}}元</b></li>
				<li><i>保险总额:</i><b v-cloak>{{dott.insuranceMoney}}元</b></li>
				<li><i>贷款金额:</i><b id="dkje" v-cloak>{{dTotalMoney(dott.user.userId,dott.totalMoney)}}元</b></li>
				<li><i>手续费:</i><b v-cloak>{{poundage}}元</b></li>
				<li><i>分期数:</i><b><input style="text-align: right;padding-right: 7px;" id="number" value="1" />期</b></li>
				<li class="f1_boc"><i>月供金额:</i><strong>分期明细</strong><b><span id="monthMoney" v-cloak></span>元</b></li>
			</ul>
			<p id="hetong">
				<span>
					<em></em><input type="checkbox" />我已阅读并同意以上
				<!--<a class="showloan" url="{{hetong.hetong[0]}}" href="javascript:;"><i>《车保分消费分期付款合同》</i></a><br />-->
				<a class="showloan" url="{{hetong.hetong[0]}}" href="javascript:;"><i>《车险投保分期付款协议》</i></a><br />
				<a class="showloan" url="{{hetong.hetong[2]}}" href="javascript:;"><i>《委托扣款授权书》</i></a>内容</span>
			</p>
			<p class="skip">
				<a href="javascript:;">确认申请</a>
			</p>
			<div>本协议委托第三方支付公司易极付代为扣款</div>
		</section>
		<!-- detail_分期明细 -->
		<div id="detail" class="detail">
			<div>
				<ul>
					<li class="title">
						<i class="close"></i>
						<p>期数</p>
						<p>月供金额</p>
						<p>还款时间</p>
					</li>
					<li v-for="(index,rs) in dott">
						<i>{{ index+1 }}</i>
						<em>￥{{ rs.money }}</em>
						<strong>{{ rs.date }}</strong>
					</li>
					<li class="state">
						<p>注：还款日期仅供参考，实际以签约日期为准</p>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script>
	var totalMoney, userId, shouxu;
	layui.use(['layer', 'jquery'], function() {
		layer = parent.layer === undefined ? layui.layer : parent.layer,
			$ = layui.jquery;
		$(".showloan").click(function() {
			var load = layer.load(),
				url = $(this).attr("url");
			if(!url) {
				layer.msg("不存在");
				layer.close(load);
				return false;
			}
			var index = layui.layer.open({
				title: "查看合同",
				type: 2,
				area: ["100%", "100%"],
				//content: "loan_contract.html",
				content: url,
				success: function(layero, index) {
					layer.close(load);
					//sessionStorage.removeItem("data-id");
				}
			});
			layui.layer.full(index);
		});
	});

	$(function() {
		//复选框
		$("#hetong span").click(function() {
			var obj = $("#hetong span input");
			if(obj.is(":checked")) {
				obj.prev('em').addClass("dot_f1");
				$('.skip a').css({
					'color': '#fff'
				})
				$('.skip a').attr('onclick', 'link("confirmation_message.html")');
			} else {
				obj.prev('em').removeClass("dot_f1");
				$('.skip a').css({
					'color': '#ddd'
				})
				$('.skip a').removeAttr('onclick');
			}
		});

		//获取分期数
		$.get(site + "/Loan/queryInstalmentNumber", function(da) {
			var arr = [];
			$.each(da.data, function(i) {
				arr.push(da.data[i].number);
			});
			$("#number").picker({
				title: "请选择分期期数",
				cols: [{
					textAlign: 'center',
					values: arr
				}],
				onChange: function(obj) {
					getMonthMoney(obj.value[0]);
				}
			});
		});

	})

	//获取每月还款金额
	var vm = new Vue({
		el: '#detail',
		data: {
			dott: []
		}
	});

	function getMonthMoney(number) {
		$.ajax({
			type: "get",
			url: site + "/Loan/queryStagingDetail",
			dataType: 'json',
			data: {
				"totalMoney": dTotalMoney(userId, totalMoney) + shouxu,
				"number": number || 1
			},
			success: function(da) {
				$("#monthMoney").html(da.data[0].money);
				vm.dott = da.data;
			}
		});
	}

	function link(url) {
		var jsonData = {};
		jsonData['number'] = $("#number").val();
		jsonData['carBrand'] = $("#carBrand").val();
		jsonData['numberOfMoney'] = $("#monthMoney").html();
		jsonData['xfjdk'] = $("#xfjdk").html();
		jsonData['dkje'] = $("#dkje").html();
		loca_save('subData', jsonData);
		window.location.href = url;
	}

	//获取手续费
	getShouxufei();

	function getShouxufei() {
		var poundage;
		$.ajax({
			url: site + "/Loan/queryPoundage",
			async: false,
			type: "get",
			dataType: 'json',
			success: function(da) {
				if(da.code == 1) {
					poundage = da.data.poundage;
				} else {
					alert("获取手续费失败");
				}
			}
		});
		shouxu = poundage;
		return poundage;
	}

	//获取合同
	function getHetong() {
		var hetong = {},
			arr = [];
		for(var i = 1; i < 4; i++) {
			$.ajax({
				url: site + "/Loan/queryContract",
				async: false,
				type: "get",
				dataType: 'json',
				data: {
					"type": i
				},
				success: function(da) {
					if(da.code == 1) {
						arr.push(da.data.url);
					} else {
						alert("获取合同失败");
					}
				}
			});
		}
		hetong["hetong"] = arr;
		return hetong;
	}

	//分期明细
	$('.f1_boc strong').on('click', function(e) {
		e.preventDefault(); //清除默认事件
		$('.detail').css({
			'opacity': '1',
			'transition': '.5s',
			'z-index': '11'
		})
	})

	//退出分期明细
	$('.close').on('touchstart', function() {
		$('.detail').css({
			'opacity': '0',
			'transition': '0.5',
			'z-index': '-1'
		})
	})

	init();

	function init() {
		//获取用户信息
		$.ajax({
			type: "get",
			url: site + "/user/find",
			data: {
				"userId": loca_fetch('userid')
			},
			dataType: 'json',
			success: function(da) {
				var uStatus = da.data.identity;
				if(da.code == 1) {
					if(uStatus == 1) { //已实名
						//获取实名信息
						queryReal();
					} else if(uStatus == 2) {
						layer.alert("您当前还未实名认证，实名认证通过后才能进行该操作", {
							btn: ['确认进入实名认证', '返回申请管理'],
							closeBtn: 0,
							title: '实名认证提示',
							btn1: function() {
								window.location.href = "real_information.html";
							},
							btn2: function() {
								window.location.href = "personal_application.html";
							}
						});
					} else if(uStatus == 3) {
						layer.alert("实名认证正在审核中，实名认证通过后才能进行该操作", {
							closeBtn: 0,
							title: false
						}, function() {
							window.location.href = "personal_application.html";
						});
					}
				} else {
					alert(da.msg);
				}
			}
		});
	}

	function queryReal() {
		$.ajax({
			type: "get",
			url: site + "/Loan/queryMyAuthentication",
			data: {
				"userId": loca_fetch('userid')
			},
			dataType: 'json',
			success: function(data) {
				if(data.code == 1) {
					$("#username").html(data.data.username);
					$("#idNumber").html(data.data.idNumber);
					$("#phone").html(data.data.phone);
					$("#bank").html(data.data.bank);
					$("#bankCardNumber").html(data.data.bankCardNumber);
					//分期申请确认
					$.ajax({
						type: "get",
						url: site + "/Loan/queryLoanInfo",
						data: {
							id: loca_fetch('dkid')
						},
						dataType: 'json',
						success: function(data) {
							userId = data.data.user.userId;
							totalMoney = data.data.totalMoney;
							getMonthMoney();
							new Vue({
								el: '.section',
								data: {
									dott: data.data,
									poundage: getShouxufei(), //获取手续费
									hetong: getHetong() //获取合同url
								},
								methods: {
									//使用的消费金
									getIntegral: function(userId, totalMoney) {
										var rs;
										$.ajaxSetup({
											async: false
										});
										$.get(site + "/user/myIntegral", {
											"userId": userId,
											"rateType": 3
										}, function(da) {
											var rates = da.data.rates,
												experience = da.data.experience, //持有的消费金
												need = Math.ceil(totalMoney * rates); //需要的消费金(向上取整)
											if(experience == 0) {
												rs = 0;
											} else {
												if(experience <= need) {
													rs = experience;
												} else if(experience > need) {
													rs = need;
												}
											}
										});
										return rs;
									},
									//抵扣的金额
									getDMoney: function(userId, totalMoney) {
										var rs;
										$.ajaxSetup({
											async: false
										});
										$.get(site + "/user/myIntegral", {
											"userId": userId,
											"rateType": 3
										}, function(da) {
											var rates = da.data.rates,
												experience = da.data.experience,
												need = Math.ceil(totalMoney * rates); //需要的积分(向上取整)
											if(experience == 0) {
												rs = 0;
											} else {
												if(experience <= need) {
													rs = Math.floor(experience * 100 / rates) / 100;
												} else if(experience > need) {
													rs = Math.floor(need * 100 / rates) / 100;
												}
											}
										});
										return rs;
									},
									//计算贷款金额
									dTotalMoney: function(userId, totalMoney) {
										var rs;
										$.ajaxSetup({
											async: false
										});
										$.get(site + "/user/myIntegral", {
											"userId": userId,
											"rateType": 3
										}, function(da) {
											var rates = da.data.rates,
												experience = da.data.experience,
												need = Math.ceil(totalMoney * rates); //需要的积分(向上取整)
											if(experience == 0) {
												rs = 0;
											} else {
												if(experience <= need) {
													rs = Math.floor(experience * 100 / rates) / 100;
												} else if(experience > need) {
													rs = Math.floor(need * 100 / rates) / 100;
												}
											}
											if(totalMoney - rs <= 0) {
												rs = 0
											} else {
												rs = totalMoney - rs;
											}
										});
										return rs;
									}
								}
							});
						}
					});
				} else {
					alert(data.msg);
				}
			}
		});
	}
</script>